{% extends "base.html" %}


{% block content %}

<h2>Cameras</h2>

{% for c in cameras %}
<div>{{c.description}}</div>

<img camera={{c.no}} src="">
<button class=midbutton camera={{c.no}} type="button">Refresh</button>
<hr>

{% end %}


<script>
console.log("yeah");
$(function() {


    function ForceReload(i, e) {
        var camera = $(e).attr("camera");
        console.log("refresh " + camera);

        var url = "/webcam_command?" + $.param(
                           {command: "get_picture", camera: camera});
        $(e).attr("src", url);
    }

    $("img").each(ForceReload);


    function ButtonForceReload() {
        ForceReload(0, $(this).prev("img").get());
    }

    $("button").click(ButtonForceReload);
});

</script>


{% end %}
